<template>
  <div class="agent_info">
    <el-col :xl="8" :lg="10" :md="12" :sm="12" :xs="24">
      <breadcrumb class="breadcrumb-container"></breadcrumb>
      <el-card>
        <el-form :model="info" label-width="80px" :rules="rules" ref="form" size="small">
          <el-form-item label="公司名称" prop="name">
            <el-input placeholder="请输入公司名称" v-model="info.name"></el-input>
          </el-form-item>
          <el-form-item label="公司简称" prop="store">
            <el-input placeholder="请输入2-6个字符" v-model="info.store"></el-input>
          </el-form-item>
          <el-form-item label="公司LOGO" prop="url">
            <el-upload :action="url" :file-list="files" :limit="1" list-type="picture" :on-success="handleUploadSuccess" :on-remove="handleRemove" :before-upload="beforeAvatarUpload">
              <el-button size="small" type="primary">点击上传</el-button><span class="tip" style="font-size: 12px">请上传144*48的logo</span>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-card>
      <el-button class="fr mt20" type="primary" size="small" @click="handleSubmit">确认配置</el-button>
    </el-col>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { agentInfo, agentInfoInit } from '@/api/setting'
import { mapGetters } from 'vuex'

export default {
  components: {
    Breadcrumb
  },
  data() {
    return {
      info: {
        name: '',
        store: '',
        img: ''
      },
      files: [],
      rules: {
        name: [{ required: true, trigger: 'blur', message: '必须填写哟~' }],
        store: [{ required: true, trigger: 'blur', min: 2, max: 6, message: '请输入正确格式~' }]
      },
      url: process.env.BASE_API + '/merchant/uploadCommer'
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！')
      }
      return isJPG && isLt2M
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          agentInfo(this.id, this.info).then(response => {
            if (response.data.errorCode === 0) {
              this.$message.success(response.data.errorMsg)
            } else {
              this.$message.error(response.data.errorMsg)
            }
          })
        }
      })
    },
    handleUploadSuccess(res) {
      this.info.img = res.result
    },
    handleRemove(file, fileList) {
      if (fileList.length === 0) {
        this.info.img = ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  mounted() {
    agentInfoInit(this.id).then(response => {
      if (response.data.errorCode === 0) {
        this.files.push({ name: '', url: response.data.result.company_logo })
        this.info.img = response.data.result.company_logo
        this.info.name = response.data.result.company_name
        this.info.store = response.data.result.company_short_name
      } else {
        this.$message.error(response.data.errorMsg)
      }
    })
  }
}
</script>